<template>
  <div>
    <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="500px"
      draggable
      align-center
      destroy-on-close
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="formData" label-width="100" :rules="rules">
        <div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="部位编号" prop="positionCode">
                <el-input
                  v-model="formData.positionCode"
                  placeholder="请输入部位编号"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="部位名称" prop="positionName">
                <el-input
                  v-model="formData.positionName"
                  placeholder="请输入部位名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="序号" prop="sort">
                <el-input
                  v-model="formData.sort"
                  placeholder="请输入序号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用状态" prop="enabled">
                <el-radio-group v-model="formData.enabled">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  type="textarea"
                  v-model="formData.remarks"
                  placeholder="请输入备注"
                  show-word-limit
                  :maxlength="250"
                  :autosize="{ minRows: 2, maxRows: 3 }"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定 </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "ComponentGroupEdit",
  inheritAttrs: false,
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
/** 弹窗显示 **/
const visibleDialog = ref(false);

watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);
const emit = defineEmits([
  "reset-table",
  "change-visible",
  "submit",
  "edit",
  "subAdd",
]);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

const handleSubmit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (formData.id === "")
        formData.id = Math.random().toString(36).slice(-8);
      emit(props.type, JSON.parse(JSON.stringify(formData)));
    }
  });
};

const formData: any = reactive({
  id: "",
  positionCode: "",
  positionName: "",
  deleted: "",
  enabled: 1,
  sort: "1",
  ids: [],
  children: [],
  version: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
});

const formRef = ref(ElForm);
function validateDegree(rule: any, value: any, callback: (a?: any) => {}) {
  if (isNaN(parseFloat(value)) && isFinite(value)) {
    callback(new Error("请输入整数"));
  } else if (!/^[+-]?\d+?(e[+-]?\d+)?$/.test(value)) {
    callback(new Error("请输入整数"));
  } else if (Number(value) < 0) {
    callback(new Error("请输入大于0的整数"));
  } else {
    callback();
  }
}
const rules: any = reactive({
  positionCode: [
    { required: true, message: "请输入部位编号", trigger: "blur" },
    { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
  ],
  positionName: [
    { required: true, message: "请输入部位名称", trigger: "blur" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  sort: [
    { required: true, message: "请输入序号", trigger: "blur" },
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
    {
      validator: validateDegree,
      trigger: "blur",
    },
  ],
  remarks: [
    { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" },
  ],
});
/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.positionCode = "";
  formData.positionName = "";
  formData.deleted = "";
  formData.enabled = 1;
  formData.ids = [];
  formData.children = [];
  formData.version = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
}

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    Object.assign(formData, props.data);
  }
);
</script>
